
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="utf-8" />
<title>正则验证</title>
<link rel="stylesheet" href="css/global.css" />
<link rel="stylesheet" href="css/standalone.css" />
<link rel="stylesheet" href="css/regex-test.css" />

<script src="js/prefixfree.min.js"></script>
<!--<script src="vunits.js"></script>-->

</head>
<body data-pattern="a(b)" data-test="aabb">

<div class="tweet button" >&copy;王志超!</div>

<aside>
	<section class="help" id="cheatsheet">
		<h1>Cheat sheet</h1>
		<dfn title="Dot: Matches everything, except line breaks">.</dfn>
		<dfn title="n times">{n}</dfn>
		<dfn title="At least n times" class="long">{n,}</dfn>
		<dfn title="At least m times but no more than n times" class="long">{m,n}</dfn>
		<dfn title="Same as {0,1}">?</dfn>
		<dfn title="Same as {0,}">*</dfn>
		<dfn title="Same as {1,}">+</dfn>
		<dfn title="Character class">[…]</dfn>
		<dfn title="Same as [a-zA-Z0-9_]">\w</dfn>
		<dfn title="Same as [0-9]">\d</dfn>
		<dfn title="About the same as [\t\r\n ]">\s</dfn>
		<dfn title="Negated character class" class="long">[^…]</dfn>
		<dfn title="Grouping and capturing">(…)</dfn>
		<dfn title="Non-capturing group" class="long">(?:…)</dfn>
		<dfn title="Beginning of string">^</dfn>
		<dfn title="End of string">$</dfn>
		<dfn title="Word boundary">\b</dfn>
		<dfn title="Non-word boundary">\B</dfn>
		<dfn title="Positive lookahead" class="long">(?=…)</dfn>
		<dfn title="Negative lookahead" class="long">(?!…)</dfn>
		<dfn title="Nth backreference">\N</dfn>
	</section>
	
	<section class="help" id="keyboard-shortcuts">
		<h1>Keyboard shortcuts</h1>
		
		<dfn title="Next match"><kbd data-keycode="40">↓</kbd></dfn>	
		
		<dfn title="Next subpattern"><kbd data-ctrlkey>⌃</kbd><kbd data-keycode="40">↓</kbd></dfn>
		<dfn title="Previous subpattern"><kbd data-ctrlkey>⌃</kbd><kbd data-keycode="38">↑</kbd></dfn>
		<!--<dfn title="Global flag"><kbd>⌃</kbd><kbd>G</kbd></dfn>-->
		<br />
		<dfn title="Previous match"><kbd data-keycode="38">↑</kbd></dfn>
		<dfn title="Case insensitive flag"><kbd data-ctrlkey>⌃</kbd><kbd data-keycode="73">I</kbd></dfn>
		<dfn title="Multiline flag"><kbd data-ctrlkey>⌃</kbd><kbd data-keycode="77">M</kbd></dfn>
	</section>
</aside>

<footer></footer>

<script src="js/utopia.js"></script>
<script src="js/regex-test.js"></script>
<script>
window.regexptester = new RegExpTester(document.body);

var tweetButton = $('.tweet.button');
tweetButton.onclick = tweetButton.onmouseover = function() {
	this.href = 'http://twitter.com/intent/tweet?hashtags=regexplained&text=%40regexplained%20' +
		encodeURIComponent('/' + regexptester.input.value + '/' + regexptester.flags);
}

$$('#keyboard-shortcuts > dfn').forEach(function(dfn) {
	var keys = $$('kbd[data-keycode], kbd[data-ctrlkey]', dfn);
	
	dfn.setAttribute('tabindex', '0');
	
	dfn.onclick = function() {
		var e = {};
		
		keys.forEach(function(kbd) {
			if (kbd.hasAttribute('data-keycode')) {
				e.keyCode = +kbd.getAttribute('data-keycode');
			}
			else if (kbd.hasAttribute('data-ctrlkey')) {
				e.ctrlKey = true;
			}
		});

		$u.event.fire(document.body, 'keydown', e);
	};
});
</script>

</body>
</html>